<!--
 * @Author: Chuckie
 * @Email: chuckie@aliyun.com
 * @Date: 2022-11-10 14:35:49
 * @LastEditTime: 2023-06-05 16:41:56
 * @Description: 
 * @FilePath: /base-web/src/views/system/config/detail.vue
 *  
-->
<template>
  <div class="app-container">
    <div class="page-detail">
      <el-form :model="state.form" :rules="state.rules" label-width="120px">
        <el-form-item :label="$t('systemConfig.table.name')" prop="name">
          <el-input v-model="state.form.name" :placeholder="$t('common.search.placeholder.input')" />
        </el-form-item>
        <el-form-item :label="$t('systemConfig.table.code')" prop="code">
          <el-input v-model="state.form.code" :placeholder="$t('common.search.placeholder.input')" />
        </el-form-item>
        <el-form-item :label="$t('systemConfig.table.type')" prop="type">
          <el-select v-model="state.form.type">
            <el-option key="1" value="TEXT" label="文本"></el-option>
            <el-option key="2" value="IMAGE" label="图片"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="state.form.type === 'TEXT'" :label="$t('systemConfig.table.value')" prop="value">
          <el-input v-model="state.form.value" :placeholder="$t('common.search.placeholder.input')" />
        </el-form-item>

        <el-form-item v-if="state.form.type === 'IMAGE'" label="图片" prop="value">
          <el-upload
            class="avatar-uploader"
            action="#"
            :limit="1"
            list-type="picture"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handleAvatarSuccess"
          >
            <el-image v-if="state.form.type === 'IMAGE'" style="width: 100px; height: 100px" :src="state.form.value" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{ $t('common.button.save') }}</el-button>
          <el-button @click="onCancel">{{ $t('common.button.back') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, onMounted, getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { create, selectOne, update, Config } from './api/config'
import { UploadProps } from 'element-plus'

const route = useRoute()
const router = useRouter()

const { proxy }: any = getCurrentInstance()
const state = reactive({
  form: {} as Config,
  rules: {
    name: [{ required: true, message: proxy.$t('common.message.pleaseInput'), trigger: 'blur' }],
    code: [{ required: true, message: proxy.$t('common.message.pleaseInput'), trigger: 'blur' }],
    type: [{ required: true, message: proxy.$t('common.message.pleaseInput'), trigger: 'blur' }],
    value: [{ required: true, message: proxy.$t('common.message.pleaseInput'), trigger: 'blur' }],
    enable: [{ required: true, message: proxy.$t('common.message.pleaseInput'), trigger: 'blur' }]
  }
})

// 获取图片转base64
const getBase64 = (file: File): Promise<string> => {
  return new Promise(function (resolve, reject) {
    const reader = new FileReader()
    let imgResult: string
    reader.readAsDataURL(file)
    reader.onload = function () {
      imgResult = reader.result ? reader.result.toString() : ''
    }
    reader.onerror = function (error) {
      reject(error)
    }
    reader.onloadend = function () {
      resolve(imgResult)
    }
  })
}

const handleAvatarSuccess: UploadProps['onSuccess'] = async (response, uploadFile) => {
  console.log(response, uploadFile, 9898)
  const imageBase64 = await getBase64(response.raw)
  console.log(imageBase64, 645)
  state.form.value = imageBase64.toString()
}

const onCancel = () => {
  router.back()
}

const onSubmit = async () => {
  if (route.params.id) {
    const data = await update(state.form)
    proxy.$message({ message: data.message, type: data.code === 20000 ? 'success' : 'error' })
    data.code === 20000 && onCancel()
  } else {
    const data = await create(state.form)
    proxy.$message({ message: data.message, type: data.code === 20000 ? 'success' : 'error' })
    data.code === 20000 && onCancel()
  }
}

const onSelectOne = async (id: string) => {
  const data = await selectOne(id)
  state.form = { ...data.data }
}

onMounted(() => {
  route.params.id && !Array.isArray(route.params.id) && onSelectOne(route.params.id)
})
</script>
